<template>
  <div class="orders-unprocessed">
    <h3>未处理订单</h3>

    <!-- 订单列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
      <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
      <el-table-column prop="productImage" label="商品图片" width="180">
        <template #default="scope">
          <img :src="scope.row.productImage" alt="商品图片" style="width: 50px; height: 50px;" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="receiver" label="收货人" width="180"></el-table-column>
      <el-table-column prop="priority" label="优先级" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleProcess(scope.row)" type="text" size="small">处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 处理订单详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="订单详情" width="40%">
      <div v-if="selectedOrder" class="order-detail">
        <p><strong>订单编号：</strong>{{ selectedOrder.orderNumber }}</p>
        <p><strong>商品名称：</strong>{{ selectedOrder.productName }}</p>
      
        <p><strong>创建时间：</strong>{{ selectedOrder.createTime }}</p>
        <p><strong>收货人：</strong>{{ selectedOrder.receiver }}</p>
        <p><strong>优先级：</strong>{{ selectedOrder.priority }}</p>
         <p><strong>商品图片：</strong></p>
        <img :src="selectedOrder.productImage" alt="商品图片" style="width: 100px; height: 100px;" />
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="confirmProcess">确认处理</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 表格数据
const tableData = ref([
  {
    orderNumber: '001',
    productName: '商品1',
    productImage: 'https://placehold.co/50x50',
    createTime: '2021-08-07 00:00:00',
    receiver: '罗小鱼',
    priority: '高',
  },
  // 可继续添加其他订单数据...
])

// 弹窗控制
const dialogVisible = ref(false)
const selectedOrder = ref(null)

// 打开弹窗并设置当前订单
const handleProcess = (row) => {
  selectedOrder.value = row
  dialogVisible.value = true
}

// 模拟处理订单
const confirmProcess = () => {
  ElMessage.success(`订单 ${selectedOrder.value.orderNumber} 已处理`)
  // 这里可以添加实际处理逻辑，如调用接口、更新状态等
  dialogVisible.value = false
}
</script>

<style scoped>
.order-detail p {
  margin-bottom: 10px;
  font-size: 14px;
}

.order-detail img {
  margin-bottom: 15px;
}
</style>